<template>
  <el-drawer
    :title="copName"
    size="1000px"
    :visible.sync="isShowDrawer"
    @close="closeDrawer"
  >
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        label-width="auto"
        label-suffix="："
        :rules="rules"
      >
        <div class="property-title">{{ translate("disCouponP") }}</div>
        <el-form-item :label="translate('disCouponName')" prop="couponsName">
          <el-input
            v-model="param.couponsName"
            class="w400"
            :placeholder="translate('disCouponNamePlace')"
            maxlength="50"
          />
        </el-form-item>
        <el-form-item
          :label="translate('lx')"
          class="select-style"
          prop="couponsType"
        >
          <el-select
            v-model="param.couponsType"
            :disabled="id != ''"
            class="w200"
            @change="changeType"
          >
            <el-option :label="translate('disCouponN')" value="0" />
            <el-option :label="translate('voucher')" value="1" />
          </el-select>
        </el-form-item>
        <div v-if="param.couponsType == '0'" class="df">
          <el-form-item
            key="1"
            :label="translate('couponRules')"
            prop="miniNum"
            :rules="{
              required: true,
              message: translate('placeInput'),
              trigger: 'change',
            }"
          >
            <span class="mr10">{{ translate("orderRealPayFull") }}</span>
            <el-input-number
              v-model="param.miniNum"
              :min="0"
              :step="1"
              class="w100 mr10"
            />
            <span
              class="mr10"
            >{{ translate("rmb") }} {{ translate("enjoyDis") }}</span>
            </span></el-form-item>
          <el-form-item
            label-width="0"
            prop="discountNum"
            :rules="{
              required: true,
              message: translate('placeInput'),
              trigger: 'change',
            }"
          >
            <el-input-number
              v-model="param.discountNum"
              :precision="1"
              :min="0.1"
              :max="10"
              class="w100 mr10"
            />
            <span class="mr20">{{ translate("disUnit") }}</span>
            <span class="placeholder9">0<{{ translate('discount') }}<10，{{ translate('toFixed1') }}</span>
          </el-form-item>
        </div>
        <div v-if="param.couponsType == '1'" class="df">
          <el-form-item
            key="2"
            :label="translate('couponRules')"
            prop="miniNum"
            :rules="{
              required: true,
              message: translate('placeInput'),
              trigger: 'change',
            }"
          >
            <span class="mr10">{{ translate("orderRealPayFull") }}</span>
            <el-input-number
              v-model="param.miniNum"
              :min="0"
              :step="1"
              class="w100 mr10"
            />
            <span class="mr10">{{ translate("rmb") }} {{ translate('subtract') }}</span>
          </el-form-item>
          <el-form-item prop="discountNum" label-width="0">
            <el-input-number
              v-model="param.discountNum"
              :min="0"
              :step="1"
              class="w100 mr10"
            />
            <!-- <el-input
              v-model="param.discountNum"
              onkeyup="value=value.replace(/[^\d^\.]/g,'')"
              onkeypress="return event.keyCode>=48&&event.keyCode<=57"
              class="w100 mr10"
            /> -->
            <span class="mr20">{{ translate("rmb") }}</span>
          </el-form-item>
        </div>
        <el-form-item :label="translate('useDesc')">
          <el-input
            v-model="param.useDes"
            style="width: 560px"
            type="textarea"
            :autosize="{ minRows: 3 }"
            :placeholder="translate('qsrnr')"
          />
          <div class="placeholder9">
            {{ translate('disCouponUseDesc') }}
          </div>
        </el-form-item>
        <div class="mb20">
          <span class="property-title">{{ translate("timeSet") }}</span>
          <span class="sub-title">{{ translate('limitTimeCouponAble') }}</span>
        </div>
        <div style="display: flex; align-items: center">
          <el-form-item :label="translate('limitDate')" prop="timeLimit">
            <el-date-picker
              v-model="param.timeLimit"
              type="datetimerange"
              :range-separator="translate('to')"
              :start-placeholder="translate('ksrq')"
              :end-placeholder="translate('jsrq')"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptionsS"
              :default-time="['00:00:00', '23:59:59']"
            />
          </el-form-item>
        </div>
        <div class="df">
          <el-form-item
            :label="translate('ableTime')"
            class="select-style"
            prop="validityType"
          >
            <el-select
              v-model="param.validityType"
              class="w200 mr20"
              :placeholder="translate('ableTimePlace')"
            >
              <el-option :label="translate('fixDate')" value="0" />
              <el-option :label="translate('afterPurchase')" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="param.validityType === '0'"
            label-width="0"
            prop="validityTime"
          >
            <span>{{ translate("fixTime") }}：</span>
            <el-date-picker
              v-model="param.validityTime"
              type="daterange"
              class="w400"
              :range-separator="translate('to')"
              :start-placeholder="translate('ksrq')"
              :end-placeholder="translate('jsrq')"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            />
          </el-form-item>
          <el-form-item
            v-if="param.validityType === '1'"
            label-width="0"
            prop="validityDays"
          >
            <span>{{ translate("indate") }}：</span>
            <el-input
              v-model="param.validityDays"
              class="w200 mr10"
              onkeyup="value=value.replace(/[^\d^]/g,'')"
              oninput="if(value<=0) { value = ''}"
              :placeholder="translate('inputDatePlace')"
            />
            <span>{{ translate("days") }}</span>
          </el-form-item>
        </div>
        <el-form-item :label="translate('timeSectionLimit')" prop="timer">
          <el-radio
            v-model="param.rulesTimeSectionFlag"
            label="1"
            @change="changeTimes"
          >{{ translate("allTimeAble") }}</el-radio>
          <el-radio
            v-model="param.rulesTimeSectionFlag"
            label="0"
            @change="changeTimes"
          >{{ translate("appointTimeAble") }}</el-radio>
          <div v-if="param.rulesTimeSectionFlag == '0'">
            <el-checkbox-group v-model="selWeekList" class="mb10">
              <el-checkbox
                v-for="item in weekList"
                :key="item.value"
                :label="item.value"
              >{{ item.label }}</el-checkbox>
            </el-checkbox-group>
            <div class="df">
              <span class="mr10">{{ translate("everyDay") }}</span>
              <div>
                <el-time-picker
                  v-model="param.useTime"
                  is-range
                  class="w200 mr10"
                  format="HH:mm"
                  value-format="HH:mm"
                  range-separator="~"
                  :start-placeholder="translate('kssj')"
                  :end-placeholder="translate('jssj')"
                  :placeholder="translate('xzsjfw')"
                />
              </div>
              <span>{{ translate("ableUse") }}</span>
            </div>
          </div>
        </el-form-item>
        <div class="mb20">
          <span class="property-title">{{ translate("IssuingRules") }}</span>
          <span class="sub-title">{{ translate("IssuingNumChnnel") }}</span>
        </div>
        <el-form-item :label="translate('fxsl')" prop="circulation">
          <el-input
            v-model="param.circulation"
            class="w400"
            onkeyup="value=value.replace(/[^\d^\.]/g,'')"
            onkeypress="return event.keyCode>=48&&event.keyCode<=57"
            oninput="if(value<0) { value = ''}"
            :placeholder="translate('fxslPlace')"
          />
        </el-form-item>
        <el-form-item :label="translate('giveChannel')" prop="couponsChannel">
          <el-select
            v-model="param.couponsChannel"
            class="w200"
            :placeholder="translate('giveChannelPlace')"
            prop="couponsChannel"
            :disabled="id != ''"
          >
            <el-option :label="translate('userClaim')" value="1" />
            <el-option :label="translate('integralEx')" value="2" />
            <el-option :label="translate('dirMarketing')" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item :label="translate('everyPeoLimitGet')">
          <el-radio
            v-model="param.limitGetFlag"
            label="1"
            @change="changeLimit"
          >{{ translate("noLimit") }}</el-radio>
          <el-radio
            v-model="param.limitGetFlag"
            label="0"
            @change="changeLimit"
          >{{ translate('astrict') }}</el-radio>
          <template v-if="param.limitGetFlag == '0'">
            <el-select v-model="param.restrictType" class="w100 mr10">
              <el-option
                v-for="item in limitNum"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-input
              v-model="param.peoLimit"
              class="w100 mr10"
              oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
            />
            <span>{{ translate('zhang') }}</span>
          </template>
        </el-form-item>
        <div class="mb20">
          <span class="property-title">{{ translate("applyRules") }}</span>
          <span class="sub-title">{{ translate('applyVenueProOrder') }}</span>
        </div>
        <el-form-item :label="translate('payMethod')">
          <el-radio
            v-model="param.rulesPayMethodFlag"
            label="1"
            @change="changePayMethods"
          >{{ translate('allPayMethodAble') }}</el-radio>
          <el-radio
            v-model="param.rulesPayMethodFlag"
            label="0"
            @change="changePayMethods"
          >{{ translate('selPayMethodAble') }}</el-radio>
          <el-checkbox-group
            v-if="param.rulesPayMethodFlag == '0'"
            v-model="selPayTypeList"
          >
            <el-checkbox
              v-for="(item, index) in payTypeList"
              :key="index"
              :label="item.value"
            >{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="translate('orderType')">
          <el-radio
            v-model="param.rulesOrderTypeFlag"
            label="1"
            @change="changeOrderType"
          >{{ translate('allOrderAble') }}</el-radio>
          <el-radio
            v-model="param.rulesOrderTypeFlag"
            label="0"
            @change="changeOrderType"
          >{{ translate('selOrderAble') }}</el-radio>
          <el-checkbox-group
            v-if="param.rulesOrderTypeFlag == '0'"
            v-model="selOrderTypeList"
          >
            <el-checkbox
              v-for="(item, index) in orderTypeList"
              :key="index"
              :label="item.id"
            >{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="margin-t-20" :label="translate('applyVenue')">
          <el-radio
            v-model="param.rulesVenueFlag"
            label="1"
            @change="changeVenue"
          >{{ translate('allVenueAble') }}</el-radio>
          <el-radio
            v-model="param.rulesVenueFlag"
            label="0"
            @change="changeVenue"
          >{{ translate('selVenueAble') }}</el-radio>
          <div v-if="param.rulesVenueFlag == '0'" class="venue-project">
            <div class="venue-list">
              <el-checkbox-group v-model="checkedVenue" @change="checkVenue">
                <el-checkbox
                  v-for="(item, index) in venueProjectListData"
                  :key="index"
                  :label="item.id"
                >{{ item.name }}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          v-if="param.rulesVenueFlag === '0'"
          :label="translate('applyProduct')"
        >
          <el-radio
            v-model="param.rulesProjectFlag"
            label="1"
            @change="changeItems"
          >{{ translate('allProductAble') }}</el-radio>
          <el-radio
            v-model="param.rulesProjectFlag"
            label="0"
            @change="changeItems"
          >{{ translate('selProductAble') }}</el-radio>
          <el-table
            v-if="param.rulesProjectFlag == '0'"
            :data="venueProjectListDataForTable"
            border
          >
            <el-table-column
              prop="name"
              :label="translate('venue')"
              width="200px"
            />
            <el-table-column :label="translate('xm')">
              <template slot-scope="scope">
                <el-checkbox-group v-model="checkedItems">
                  <el-checkbox
                    v-for="(item, index) in scope.row.projects"
                    :key="index"
                    :label="item.id"
                    @change="checkProject()"
                  >{{ item.projectName }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <div class="separate" />
        <div>
          <el-button
            v-preventReClick
            type="primary"
            :loading="submitLoading"
            @click="formOnSubmit('form')"
          >{{ translate("enter") }}</el-button>
          <el-button @click="closeDrawer">{{ translate("cancel") }}</el-button>
        </div>
      </el-form>
    </div>
  </el-drawer>
</template>

<script>
import {
  couponsAdd,
  venueList,
  orderTypeList,
  venueProjectList,
  allConfigList,
  couponsEdit,
  couponsDetail
} from '@/api'
import { weekList, limitNum, rules } from './config'
import { pickerOptionsS, pickerOptions } from '@/utils/config'
export default {
  name: 'CouponAdd',
  data() {
    return {
      id: '',
      isShowDrawer: false,
      submitLoading: false,
      weekList,
      limitNum,
      pickerOptions,
      pickerOptionsS,
      copName: this.translate('disCouponAdd'),

      payTypeList: [], // option支付方式
      orderTypeList: [],
      venueProjectListData: [],

      filters: {},
      selWeekList: [], // param 选中时间
      selPayTypeList: [], // param 选中支付方式
      selOrderTypeList: [], // param 选中订单类型
      checkedVenue: [], // param 选中场馆
      checkedItems: [], // param
      venueProjectListDataForTable: [],

      param: {
        rulesPayMethodFlag: '1',
        rulesOrderTypeFlag: '1',
        rulesVenueFlag: '1',
        rulesProjectFlag: '1',
        limitGetFlag: '1',
        rulesTimeSectionFlag: '1',

        couponsChannel: '1',
        couponsType: '0', // 优惠券类型 0-折扣券，1-代金券

        circulation: '', // 发行数量
        couponsId: '', // 优惠券id
        couponsName: '', // 优惠券名称
        couponsStatus: '', // 启用状态（0-禁用，1-启用）

        // discountNum: '', // 折扣/金额
        peoLimit: -1, // 每人限领数量
        receiveEndTime: '', // 领取结束时间
        receiveStartTime: '', // 领取开始时间
        useDes: '', // 使用说明
        useTimeInfo: '', // 适用时间文字描述
        validityDays: '', // 有效期天数
        validityStartTime: '', // 有效期开始时间
        validityEndTime: '', // 有效期到期时间
        validityType: '0', // 有效期类型0-固定期限，1-领取生效
        validityTime: [],
        timeLimit: [],
        useRules: {
          // 使用规则
          useStadiums: '', // 适用场馆
          useItems: '', // 适用项目
          orderTypes: '', // 订单类型
          payMethods: '', // 支付方式
          miniNum: null, // 最低消费
          useDateStart: '', // 适用开始日期
          useDateEnd: '', // 适用结束日期
          useDays: '', // 适用日，逗号分隔
          useTimeStart: '', // 适用开始时间
          useTimeEnd: '' // 适用结束时间
        }
      },
      rules
    }
  },
  created() {
    this.getVenueList()
    this.getVenueProjectList()
    this.getOrderTypeList()
    this.getPayTypeList()
  },
  methods: {
    closeDrawer() {
      this.isShowDrawer = false
      this.$emit('close')
    },
    formOnSubmit(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          that.onSubmit()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    changeType() {
      this.$set(this.param, 'discountNum', '')
    },
    changeLimit(val) {
      this.restrictType = ''
      if (val === '1') {
        this.param.peoLimit = -1
      } else {
        this.param.peoLimit = 1
      }
    },
    changeTimes() {
      this.$set(this.param, 'useTime', null)
      this.selWeekList = []
    },
    changePayMethods(val) {
      this.selPayTypeList = []
      this.param.useRules.payMethods = ''
    },
    changeOrderType() {
      this.selOrderTypeList = []
      this.param.useRules.orderTypes = null
    },
    changeVenue(val) {
      this.checkedVenue = []
      if (val === '0') {
        this.venueProjectListDataForTable = []
      } else {
        this.venueProjectListDataForTable = this.venueProjectListData
      }
      this.changeItems()
    },
    changeItems() {
      // this.checkVenue()
      this.checkedItems = []
      this.param.useRules.useItems = ''
    },
    // 获取场馆列表
    getVenueList() {
      venueList({
        param: {}
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.filters.venueList = res.recordList
        })
        .catch(() => { })
    },
    // 获取场馆项目
    getVenueProjectList() {
      venueProjectList({}).then((res) => {
        if (res.errorCode !== '000000') return
        this.venueProjectListData = res.recordList
        this.venueProjectListDataForTable = res.recordList || []
      })
    },
    // 获取订单类型列表
    getOrderTypeList() {
      orderTypeList({ param: { type: 'ORDER_TYPE_COUPONS' } }).then((res) => {
        if (res.errorCode !== '000000') return
        this.orderTypeList = res.recordList
      })
    },
    // 获取支付方式列表
    getPayTypeList() {
      allConfigList({ param: { type: '2', code: 'PAY_METHOD_COUPONS' } }).then((res) => {
        if (res.errorCode !== '000000') return
        this.payTypeList = res.recordList
      })
    },
    // 重置场馆项目选中状态
    resetVenueProject() {
      const { venueProjectListData, checkedVenue } = this
      const checedList = []
      if (checkedVenue.length === 0) {
        this.venueProjectListDataForTable = venueProjectListData
      } else {
        for (const i in venueProjectListData) {
          for (const j in checkedVenue) {
            if (venueProjectListData[i].id === checkedVenue[j]) {
              checedList.push(venueProjectListData[i])
            }
          }
        }
        this.venueProjectListDataForTable = checedList
      }
    },
    // 选择场馆
    checkVenue(e) {
      const { venueProjectListData } = this
      const { checkedItems } = this
      const checedList = []
      for (const i in venueProjectListData) {
        if (e.includes(venueProjectListData[i].id)) {
          checedList.push(venueProjectListData[i])
        }
      }

      this.venueProjectListDataForTable = checedList
      for (const i in venueProjectListData) {
        if (!e.includes(venueProjectListData[i].id)) {
          for (const project of venueProjectListData[i].projects) {
            if (this.checkedItems.includes(project.id)) {
              for (const key in this.checkedItems) {
                if (this.checkedItems[key] === project.id) {
                  checkedItems.splice(key, 1)
                }
              }
            }
          }
        }
      }
      this.checkedItems = checkedItems
    },
    // 选择项目
    checkProject(e) {
      console.log(e, this.checkedItems)
    },
    // 获取优惠券详情
    getCouponDetailInfo(couponsId) {
      couponsDetail({
        param: { couponsId },
        userId: sessionStorage.getItem('userId')
      })
        .then((res) => {
          if (res.errorCode !== '000000') return
          if (res.errorCode === '000000') {
            if (res.record.receiveEndTime) {
              const timeLimit = [res.record.receiveStartTime, res.record.receiveEndTime]
              res.record.timeLimit = timeLimit
            }
            this.param = res.record
            if (this.param.peoLimit == null) {
              this.param.peoLimit = -1
              this.$set(this.param, 'limitGetFlag', '1')
            } else {
              // this.param.peoLimit = -1
              this.$set(this.param, 'limitGetFlag', '0')
            }
            if (this.param.couponsType === '0') {
              this.param.discountNum = this.param.discountNum * 10
            }
            if (this.param.useRules.miniNum) {
              this.$set(this.param, 'miniNum', this.param.useRules.miniNum)
            }
            if (this.param.useRules.useDays) {
              this.selWeekList = this.param.useRules.useDays.includes(',')
                ? this.param.useRules.useDays.split(',')
                : [this.param.useRules.useDays]
            }
            if (this.param.useRules.payMethods) {
              this.selPayTypeList = this.param.useRules.payMethods.includes(',')
                ? this.param.useRules.payMethods.split(',')
                : [this.param.useRules.payMethods]
            }
            if (this.param.useRules.orderTypes) {
              this.selOrderTypeList = this.param.useRules.orderTypes.includes(
                ','
              )
                ? this.param.useRules.orderTypes.split(',')
                : [this.param.useRules.orderTypes]
            }
            if (this.param.useRules.useStadiums) {
              this.checkedVenue = this.param.useRules.useStadiums.includes(',')
                ? this.param.useRules.useStadiums.split(',')
                : [this.param.useRules.useStadiums]
            }
            if (this.param.useRules.useItems) {
              this.checkedItems = this.param.useRules.useItems.includes(',')
                ? this.param.useRules.useItems.split(',')
                : [this.param.useRules.useItems]
              this.$set(this.param, 'rulesProjectFlag', '0')
            } else {
              this.$set(this.param, 'rulesProjectFlag', '1')
            }
            if (res.record.validityStartTime && res.record.validityEndTime) {
              this.$set(this.param, 'validityTime', [res.record.validityStartTime, res.record.validityEndTime])
            } else {
              this.$set(this.param, 'validityTime', [])
            }
            if (res.record.useRules.useDateStart || res.record.useRules.useDateEnd) {
              this.$set(this.param, 'useDate', [res.record.useRules.useDateStart, res.record.useRules.useDateEnd])
            }
            if (res.record.useRules.useTimeStart || res.record.useRules.useTimeEnd) {
              this.$set(this.param, 'useTime', [res.record.useRules.useTimeStart, res.record.useRules.useTimeEnd])
            }
            this.resetVenueProject()
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    onSubmit() {
      const that = this
      // 代金券 金额校验
      if (this.param.couponsType === '1') {
        if (this.param.miniNum < this.param.discountNum) {
          return this.$message.warning(this.translate('realPayDayuVoucher'))
        }
      } else {
        this.param.discountNum = this.param.discountNum / 10
      }
      if (this.param.validityType === '0') {
        this.param.validityStartTime = this.param.validityTime[0]
        this.param.validityEndTime = this.param.validityTime[1]
      } else {
        this.param.validityDays = parseInt(this.param.validityDays)
      }
      this.param.circulation = parseInt(this.param.circulation)
      if (this.param.timeLimit.length > 0) {
        const timeLimit = this.param.timeLimit
        this.param.receiveStartTime = timeLimit[0]
        this.param.receiveEndTime = timeLimit[1]
      }
      let param = JSON.stringify(this.param)
      param = JSON.parse(param)
      param.useRules.useStadiums = ''
      param.useRules.useItems = ''
      param.useRules.payMethods = ''
      param.useRules.orderTypes = ''
      if (this.checkedVenue.length) {
        param.useRules.useStadiums = this.checkedVenue.join(',')
      }
      if (this.checkedItems.length) {
        param.useRules.useItems = this.checkedItems.join(',')
      }
      if (this.selPayTypeList.length) {
        param.useRules.payMethods = this.selPayTypeList.join(',')
      }
      if (this.selOrderTypeList.length) {
        param.useRules.orderTypes = this.selOrderTypeList.join(',')
      }
      if (param.miniNum || param.miniNum === '0' || param.miniNum === 0) {
        param.useRules.miniNum = param.miniNum
      }
      // 适用日期校验
      param.useTimeInfo = ''
      param.useRules.useDays = ''
      if (param.useDate) {
        param.useRules.useDateStart = param.useDate[0]
        param.useRules.useDateEnd = param.useDate[1]
      }
      if (param.useDate) {
        param.useRules.useDateStart = param.useDate[0]
        param.useRules.useDateEnd = param.useDate[1]
      }
      if (this.selWeekList.length) {
        param.useRules.useDays = this.selWeekList.join(',')
      }
      // 适用时间校验
      if (param.useTime) {
        param.useRules.useTimeStart = param.useTime[0]
        param.useRules.useTimeEnd = param.useTime[1]
      }
      this.submitLoading = true
      if (this.id) {
        // 编辑
        couponsEdit({ param, userId: sessionStorage.getItem('userId') })
          .then((res) => {
            // console.log(res)
            that.submitLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('editcg'))
              this.isShowDrawer = false
              this.$emit('success')
            }
          })
          .catch((er) => {
            that.submitLoading = false
            console.log(er)
          })
      } else {
        couponsAdd({
          param: param,
          userId: sessionStorage.getItem('userId')
        })
          .then((res) => {
            that.submitLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('addcg'))
            this.isShowDrawer = false
            this.$emit('success')
          })
          .catch((err) => {
            that.submitLoading = false
            console.log(err)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.separate {
  width: 100%;
  height: 1px;
  margin: 20px 0px;
  background-color: #dfe2e8;
}
.sub-title {
  font-size: 13px;
}
</style>
